<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name='authors' content = '包骐瑞'>
        <meta name="viewport" content="width=device-width">
        <title>餐厅游戏</title>
        <link href="styles/restaurant.css" rel="stylesheet">
        <script src="scripts/restaurant.js" defer></script>
    </head>
    <body>
        <img src='images/dose-juice-sTPy-oeA3h0-unsplash.jpg' alt='背景' id='background'>
        <div class='blackShadow'></div>
        <section class='gameBegin'> 
            <div class='inline-Box'>
                <h1>WebMOOC餐厅开业啦!</h1>
                <p class='introduction'>WebMOOC餐厅即将开业，请认真经营你的餐厅吧经营餐厅需要做好下面几件事情! 加油!</p>
                <div class='things'>
                    <p>招聘厨师</p><p>迎接客人</p><p>烹饪美食</p>
                </div>
                <div class='play'>
                    <button class='inline-Box'>
                        <div class='shade'></div>
                        <p>开始经营吧</p>
                    </button>
                </div>
            </div>
        </section>
        <section class='menu'>
            <div class='inline-Box'>
                <div class='customerBox'>
                    <div class='inline-Box-eating4' id='inline-customerBox1'>
                        <div class='customer-shade'></div>
                    </div>
                    <img class='customerImg' src='images/379339-512.png' alt='custmoer'>
                </div>
                <p class='orderDishes'><span class='customerName'>LSY</span>正在点菜，已点 <span class='totalPrice'></span> 元的菜</p>
                <div class='menu-border'>
                    <div class='inline-border'>
                        <p class='allDishes'>凉菜（二选一，可不点）</p>
                        <p class='dishes'><input class='check' type="checkbox" id='coldDishe1'>凉拌paimeng<span>...............￥ 12</span></p>
                        <p class='dishes'><input class='check' type="checkbox" id='coldDishe2'>冷切paimeng<span>...............￥ 15</span></p>
                        <p class='allDishes'>主菜（五选一，必点）</p>
                        <p class='dishes'><input class='check' type="checkbox" id='mainDishe1'>清蒸paimeng<span>...............￥ 16</span></p>
                        <p class='dishes'><input class='check' type="checkbox" id='mainDishe2'>酥炸paimeng<span>...............￥ 18</span></p>
                        <p class='dishes'><input class='check' type="checkbox" id='mainDishe3'>红烧paimeng<span>...............￥ 12</span></p>
                        <p class='dishes'><input class='check' type="checkbox" id='mainDishe4'>炭烤paimeng<span>...............￥ 17</span></p>
                        <p class='dishes'><input class='check' type="checkbox" id='mainDishe5'>水煮paimeng<span>...............￥ 10</span></p>
                        <p class='allDishes'>饮品（二选一，必点）</p>
                        <p class='dishes'><input class='check' type="checkbox" id='drink1'>鲜榨paimeng<span>...............￥ 10</span></p>
                        <p class='dishes'><input class='check' type="checkbox" id='drink2'>paimeng奶茶<span>...............￥ 10</span></p>
                    </div>
                </div>
                <div class='orderCompleteBorder'>
                    <button class='inline-Box'>
                        <div class='shade'></div>
                        <p>点好了，快点上菜</p>
                    </button>
                </div>
                <div class='noeat'>
                    <button class='inline-Box'>
                        <div class='shade'></div>
                        <p>不吃了</p>
                    </button>
                </div>
            </div>
        </section>
        <section class='buyChef'>
            <div class='inline-Box'>
                <h1>招聘新厨师</h1>
                <p>招聘一名新厨师可以帮你更快地为顾客烹饪菜肴，</p>
                <p>增加餐厅收入。你最多可以拥有六名厨师。</p>
                <p>但每个厨师每周需要你支付工资￥100</p>  
                <p>请问你确认新招聘一名厨师吗?</p>  
                <div class='confirmRecruitment'>
                    <button class='inline-Box'>
                        <div class='shade'></div>
                        <p>是的，确认招聘</p>
                    </button>    
                </div>
                <div class='noRecruitment'>
                    <button class='inline-Box'>
                        <div class='shade'></div>
                        <p>先不了</p>
                    </button>    
                </div>
            </div>
        </section>
        <section class='fryChef'>
            <div class='inline-Box'>
                <h1>解雇厨师</h1>
                <p class='one'>解雇当前闲置的厨师可以帮你节省成本。</p>
                <p>解雇时会按厨师本周已经工作的日子结算工资，并会赔偿一周工资作为解约金。</p>
                <p>解雇当前厨师结算工资及解约金需要付出￥140</p>  
                <div class='confirmFry'>
                    <button class='inline-Box'>
                        <div class='shade'></div>
                        <p>是的，确认解雇</p>
                    </button>    
                </div>
                <div class='noFry'>
                    <button class='inline-Box'>
                        <div class='shade'></div>
                        <p>先不了</p>
                    </button>    
                </div>
                <div class='moneyAlert'>
                    <p>你的金额已经不足支付解约金</p>
                </div>
            </div>
        </section>
        <section id='timeBox'>
            <div class='inline-Box'>
                <div class='shade'></div>
                <p>W<span id='dateWeek'>1</span></p>
                <p>D<span id='dateDay'>1</span></p>
            </div>
        </section>
        <section id='moneyBox'>
            <div class='inline-Box'>
                <div class='shade'></div>
                <p id='money'>500</p>
            </div>
        </section>
        <section id='allChefBox' class='small-allChefBox'>      <!--big-allChefBox-->
            <div class='small-inline-Box'><!--inline-Box-->
                <div class='shade'></div>
                <div class='chefBox' id='chefBox1'>
                    <div class='inline-Box' id='inline-chefBox1'>  <!--inline-Box-cooking1-->
                        <div class='chef-shade'></div>
                    </div>
                    <div class='cookingBar'>
                        <div class='inline-Bar1'>                  <!--inline-Bar2-->
                            <div class='shade'></div>
                            <p class='dish'>UI炖UI</p>
                        </div>
                    </div>
                    <div class='addCookerImgBox'>
                        <img class='addCookerImg' src='images/iconfinder_Chef-2_379358.png' alt='cooker'>
                    </div>
                    <img class='cookerImg' src='images/iconfinder_Chef-2_379358.png' alt='cooker'>
                    <img class='plateImg' src='images/iconfinder_Food-Dome_379366.png' alt='plate'>
                    <div class='multiplyBox' data-index = '1'>
                        <button class='inline-multiplyBox' data-index = '1'>
                            <div class='multiplyRow' data-index = '1'></div>
                            <div class='multiplyColumn' data-index = '1'></div>
                        </button>
                    </div>
                    <button class='addBox'>
                        <div class='inline-multiplyBox'>
                            <div class='multiplyRow'></div>
                            <div class='multiplyColumn'></div>
                        </div>
                    </button> 
                </div>
                <div class='chefBox' id='chefBox2'>
                    <div class='inline-Box' id='inline-chefBox2'>  <!--inline-Box-cooking2-->
                        <div class='chef-shade'></div>
                    </div>    
                    <div class='cookingBar'>
                        <div class='inline-Bar1'>               
                            <div class='shade'></div>
                            <p class='dish'>UI炖UI</p>
                        </div>
                    </div>
                    <div class='addCookerImgBox'>
                        <img class='addCookerImg' src='images/iconfinder_Chef-2_379358.png' alt='cooker'>
                    </div>
                    <img class='cookerImg' src='images/iconfinder_Chef-2_379358.png' alt='cooker'>
                    <img class='plateImg' src='images/iconfinder_Food-Dome_379366.png' alt='plate'>
                    <div class='multiplyBox'>
                        <button class='inline-multiplyBox' data-index = '2'>
                            <div class='multiplyRow' data-index = '2'></div>
                            <div class='multiplyColumn' data-index = '2'></div>
                        </button>
                    </div>
                    <button class='addBox'>
                        <div class='inline-multiplyBox'>
                            <div class='multiplyRow'></div>
                            <div class='multiplyColumn'></div>
                        </div>
                    </button> 
                </div>
                <div class='chefBox' id='chefBox3'>
                    <div class='inline-Box' id='inline-chefBox3'>
                        <div class='chef-shade'></div>
                    </div> 
                    <div class='cookingBar'>
                        <div class='inline-Bar1'>
                            <div class='shade'></div>
                            <p class='dish'>UI炖UI</p>
                        </div>
                    </div>
                    <div class='addCookerImgBox'>
                        <img class='addCookerImg' src='images/iconfinder_Chef-2_379358.png' alt='cooker'>
                    </div>
                    <img class='cookerImg' src='images/iconfinder_Chef-2_379358.png' alt='cooker'>
                    <img class='plateImg' src='images/iconfinder_Food-Dome_379366.png' alt='plate'>
                    <div class='multiplyBox'>
                        <button class='inline-multiplyBox' data-index = '3'>
                            <div class='multiplyRow' data-index = '3'></div>
                            <div class='multiplyColumn' data-index = '3'></div>
                        </button>
                    </div>
                    <button class='addBox'>
                        <div class='inline-multiplyBox'>
                            <div class='multiplyRow'></div>
                            <div class='multiplyColumn'></div>
                        </div>
                    </button> 
                </div>
                <div class='chefBox' id='chefBox4'>
                    <div class='inline-Box' id='inline-chefBox4'>
                        <div class='chef-shade'></div>
                    </div> 
                    <div class='cookingBar'>
                        <div class='inline-Bar1'>
                            <div class='shade'></div>
                            <p class='dish'>UI炖UI</p>
                        </div>
                    </div>
                    <div class='addCookerImgBox'>
                        <img class='addCookerImg' src='images/iconfinder_Chef-2_379358.png' alt='cooker'>
                    </div>
                    <img class='cookerImg' src='images/iconfinder_Chef-2_379358.png' alt='cooker'>
                    <img class='plateImg' src='images/iconfinder_Food-Dome_379366.png' alt='plate'>
                    <div class='multiplyBox'>
                        <button class='inline-multiplyBox' data-index = '4'>
                            <div class='multiplyRow' data-index = '4'></div>
                            <div class='multiplyColumn' data-index = '4'></div>
                        </button>
                    </div>
                    <button class='addBox'>
                        <div class='inline-multiplyBox'>
                            <div class='multiplyRow'></div>
                            <div class='multiplyColumn'></div>
                        </div>
                    </button> 
                </div>
                <div class='chefBox' id='chefBox5'>
                    <div class='inline-Box' id='inline-chefBox5'>
                        <div class='chef-shade'></div>
                    </div>
                    <div class='cookingBar'>
                        <div class='inline-Bar1'>
                            <div class='shade'></div>
                            <p class='dish'>UI炖UI</p>
                        </div>
                    </div>
                    <div class='addCookerImgBox'>
                        <img class='addCookerImg' src='images/iconfinder_Chef-2_379358.png' alt='cooker'>
                    </div>
                    <img class='cookerImg' src='images/iconfinder_Chef-2_379358.png' alt='cooker'>
                    <img class='plateImg' src='images/iconfinder_Food-Dome_379366.png' alt='plate'>
                    <div class='multiplyBox'>
                        <button class='inline-multiplyBox' data-index = '5'>
                            <div class='multiplyRow' data-index = '5'></div>
                            <div class='multiplyColumn' data-index = '5'></div>
                        </button>
                    </div>
                    <button class='addBox'>
                        <div class='inline-multiplyBox'>
                            <div class='multiplyRow'></div>
                            <div class='multiplyColumn'></div>
                        </div>
                    </button> 
                </div>
                <div class='chefBox' id='chefBox6'>
                    <div class='inline-Box' id='inline-chefBox6'>
                        <div class='chef-shade'></div>   <!--addChef-shade-->
                    </div>
                    <div class='cookingBar'>
                        <div class='inline-Bar1'>
                            <div class='shade'></div>
                            <p class='dish'>UI炖UI</p>
                        </div>
                    </div>
                    <div class='addCookerImgBox'>
                        <img class='addCookerImg' src='images/iconfinder_Chef-2_379358.png' alt='cooker'>
                    </div>
                    <img class='cookerImg' src='images/iconfinder_Chef-2_379358.png' alt='cooker'>
                    <img class='plateImg' src='images/iconfinder_Food-Dome_379366.png' alt='plate'>
                    <div class='multiplyBox'>
                        <button class='inline-multiplyBox' data-index = '6'>
                            <div class='multiplyRow' data-index = '6'></div>
                            <div class='multiplyColumn' data-index = '6'></div>
                        </button>
                    </div>
                    <button class='addBox'>
                        <div class='inline-multiplyBox'>
                            <div class='multiplyRow'></div>
                            <div class='multiplyColumn'></div>
                        </div>
                    </button>    
                </div>
            </div>
        </section>
        <section id='allCustomerBox'>
            <div class='inline-Box'>
                <div class='customerBox' id='customerBox1'>
                    <div class='inline-Box-eating' id='inline-customerBox1'> <!--class的1,2,3,4代表四种颜色，序号可更改--><!--inline-Box-eating1-->
                        <div class='customer-shade'></div>
                    </div>
                    <div class='eatingBar'>
                        <div class='inline-Bar1' id='customerBox1-barColor1'>   <!--1,2.3.4代表不同颜色，序号可更改-->
                            <div class='shade'></div> 
                            <p class='dish'>UI炖UI<div class='drawLine'></div></p>
                        </div>       <!--finished1,2.3代表不同颜色，与eatingBar对应，序号可更改-->
                        <button class='finished1' data-index = '1' data-allindex = '1'><img data-index = '1' data-allindex = '1' src='images/iconfinder_Food-Dome_379366.png' alt='菜做好了'></button>
                    </div>          
                    <div class='eatingBar'>
                        <div class='inline-Bar1' id='customerBox1-barColor2'>                                   
                            <div class='shade'></div>
                            <p class='dish'>爆炒js<div class='drawLine'></div></p>
                        </div>
                        <button class='finished1' data-index = '2' data-allindex = '1'><img data-index = '2' data-allindex = '1' src='images/iconfinder_Food-Dome_379366.png' alt='菜做好了'></button>
                    </div>
                    <div class='eatingBar'>
                        <div class='inline-Bar1' id='customerBox1-barColor3'>                                   
                            <div class='shade'></div>
                            <p class='dish'>酥炸HEML<div class='drawLine'></div></p>
                        </div>
                        <button class='finished1' data-index = '3' data-allindex = '1'><img data-index = '3' data-allindex = '1' src='images/iconfinder_Food-Dome_379366.png' alt='菜做好了'></button>
                    </div>
                    <img class='customerImg' src='images/379339-512.png' alt='custmoer'>
                    <button class='checkout' data-index = '1'><img data-index = '1' src='images/iconfinder_Euro-Coin_379523.png' alt='结账'></button>
                    <button class='placate' data-index = '1'><img data-index = '1' src='images/iconfinder_Instagram_UI-07_2315589.png' alt='安抚'></button>
                </div>
                <div class='customerBox' id='customerBox2'>
                    <div class='inline-Box-eating' id='inline-customerBox2'>  <!--class的无,1,2,3代表四种颜色，序号可更改-->
                        <div class='customer-shade'></div>
                    </div>
                    <div class='eatingBar'>                                     <!--顾客吃菜进度条，可由class直接添加-->
                        <div class='inline-Bar1' id='customerBox2-barColor1'>                              
                            <div class='shade'></div> 
                            <p class='dish'>UI炖UI<div class='drawLine'></div></p> <!--划线要和inline-Bar4一起添加-->
                        </div>
                        <button class='finished1' data-index = '1' data-allindex = '2'><img data-index = '1' data-allindex = '2' src='images/iconfinder_Food-Dome_379366.png' alt='菜做好了'></button>
                    </div>
                    <div class='eatingBar'>                                     
                        <div class='inline-Bar1' id='customerBox2-barColor2'>                                  
                            <div class='shade'></div> 
                            <p class='dish'>UI炖UI<div class='drawLine'></div></p>
                        </div>
                        <button class='finished1' data-index = '2' data-allindex = '2'><img  data-index = '2' data-allindex = '2' src='images/iconfinder_Food-Dome_379366.png' alt='菜做好了'></button>
                    </div>
                    <div class='eatingBar'>
                        <div class='inline-Bar1' id='customerBox2-barColor3'>                                   
                            <div class='shade'></div>
                            <p class='dish'>酥炸HEML<div class='drawLine'></div></p>
                        </div>
                        <button class='finished1' data-index = '3' data-allindex = '2'><img data-index = '3' data-allindex = '2' src='images/iconfinder_Food-Dome_379366.png' alt='菜做好了'></button>
                    </div>
                    <img class='customerImg' src='images/379444-512.png' alt='custmoer'>
                    <button class='checkout' data-index = '2'><img data-index = '2' src='images/iconfinder_Euro-Coin_379523.png' alt='结账'></button>
                    <button class='placate' data-index = '2'><img data-index = '2' src='images/iconfinder_Instagram_UI-07_2315589.png' alt='安抚'></button>
                </div>
                <div class='customerBox' id='customerBox3'>
                    <div class='inline-Box-eating' id='inline-customerBox3'>  
                        <div class='customer-shade'></div>
                    </div>
                    <div class='eatingBar'>                                     
                        <div class='inline-Bar1' id='customerBox3-barColor1'>                                  
                            <div class='shade'></div> 
                            <p class='dish'>UI炖UI<div class='drawLine'></div></p>
                        </div>
                        <button class='finished1' data-index = '1' data-allindex = '3'><img data-index = '1' data-allindex = '3' src='images/iconfinder_Food-Dome_379366.png' alt='菜做好了'></button>
                    </div>
                    <div class='eatingBar'>
                        <div class='inline-Bar1' id='customerBox3-barColor2'>                                   
                            <div class='shade'></div>
                            <p class='dish'>酥炸HEML<div class='drawLine'></div></p>
                        </div>
                        <button class='finished1' data-index = '2' data-allindex = '3'><img data-index = '2' data-allindex = '3' src='images/iconfinder_Food-Dome_379366.png' alt='菜做好了'></button>
                    </div>
                    <div class='eatingBar'>
                        <div class='inline-Bar1' id='customerBox3-barColor3'>                 <!--1,2.3.4代表不同颜色，序号可更改-->
                            <div class='shade'></div> 
                            <p class='dish'>UI炖UI<div class='drawLine'></div></p>
                        </div>       <!--finished1,2.3代表不同颜色，与eatingBar对应，序号可更改-->
                        <button class='finished1' data-index = '3' data-allindex = '3'><img data-index = '3' data-allindex = '3' src='images/iconfinder_Food-Dome_379366.png' alt='菜做好了'></button>
                    </div>        
                    <img class='customerImg' src='images/379446-512.png' alt='custmoer'>
                    <button class='checkout' data-index = '3'><img data-index = '3' src='images/iconfinder_Euro-Coin_379523.png' alt='结账'></button>
                    <button class='placate' data-index = '3'><img data-index = '3' src='images/iconfinder_Instagram_UI-07_2315589.png' alt='安抚'></button>
                </div>
                <div class='customerBox' id='customerBox4'>
                    <div class='inline-Box-eating' id='inline-customerBox4'>  
                        <div class='customer-shade'></div>
                    </div>
                    <div class='eatingBar'>                                     
                        <div class='inline-Bar1' id='customerBox4-barColor1'>                                  
                            <div class='shade'></div> 
                            <p class='dish'>UI炖UI<div class='drawLine'></div></p>
                        </div>
                        <button class='finished1' data-index = '1' data-allindex = '4'><img data-index = '1' data-allindex = '4' src='images/iconfinder_Food-Dome_379366.png' alt='菜做好了'></button>
                    </div>
                    <div class='eatingBar'>
                        <div class='inline-Bar1' id='customerBox4-barColor2'>                                   
                            <div class='shade'></div>
                            <p class='dish'>酥炸HEML<div class='drawLine'></div></p>
                        </div>
                        <button class='finished1' data-index = '2' data-allindex = '4'><img data-index = '2' data-allindex = '4' src='images/iconfinder_Food-Dome_379366.png' alt='菜做好了'></button>
                    </div>
                    <div class='eatingBar'>
                        <div class='inline-Bar1' id='customerBox4-barColor3'>                     <!--1,2.3.4代表不同颜色，序号可更改-->
                            <div class='shade'></div> 
                            <p class='dish'>UI炖UI<div class='drawLine'></div></p>
                        </div>       <!--finished1,2.3代表不同颜色，与eatingBar对应，序号可更改-->
                        <button class='finished1' data-index = '3' data-allindex = '4'><img data-index = '3' data-allindex = '4' src='images/iconfinder_Food-Dome_379366.png' alt='菜做好了'></button>
                    </div> 
                    <img class='customerImg' src='images/379446-512.png' alt='custmoer'>
                    <button class='checkout' data-index = '4'><img data-index = '4' src='images/iconfinder_Euro-Coin_379523.png' alt='结账'></button>
                    <button class='placate' data-index = '4'><img data-index = '4' src='images/iconfinder_Instagram_UI-07_2315589.png' alt='安抚'></button>
                </div>
                <div class='waitCustomerBox' id='waitCustomerBox0'> <!--id指排队的第几位客人-->
                    <div class='inline-Box-eating4'>  
                        <div class='customer-shade'></div>
                    </div>
                    <div class='cookingBar'>
                        <div class='inline-Bar5'>
                            <div class='shade'></div>
                            <p class='wait'>等待中</p>
                        </div>
                    </div>
                    <img class='customerImg' src='images/379448-512.png' alt='custmoer'>
                </div>
                <div class='waitCustomerBox' id='waitCustomerBox1'>
                    <div class='inline-Box-eating4'>  
                        <div class='customer-shade'></div>
                    </div>
                    <div class='cookingBar'>
                        <div class='inline-Bar5'>
                            <div class='shade'></div>
                            <p class='wait'>等待中</p>
                        </div>
                    </div>
                    <img class='customerImg' src='images/379448-512.png' alt='custmoer'>
                </div>
                <div class='waitCustomerBox' id='waitCustomerBox2'>
                    <div class='inline-Box-eating4'>  
                        <div class='customer-shade'></div>
                    </div>
                    <div class='cookingBar'>
                        <div class='inline-Bar5'>
                            <div class='shade'></div>
                            <p class='wait'>等待中</p>
                        </div>
                    </div>
                    <img class='customerImg' src='images/379448-512.png' alt='custmoer'>
                </div>
                <div class='waitCustomerBox' id='waitCustomerBox3'>
                    <div class='inline-Box-eating4'>  
                        <div class='customer-shade'></div>
                    </div>
                    <div class='cookingBar'>
                        <div class='inline-Bar5'>
                            <div class='shade'></div>
                            <p class='wait'>等待中</p>
                        </div>
                    </div>
                    <img class='customerImg' src='images/379448-512.png' alt='custmoer'>
                </div>
                <div class='waitCustomerBox' id='waitCustomerBox4'>
                    <div class='inline-Box-eating4'>  
                        <div class='customer-shade'></div>
                    </div>
                    <div class='cookingBar'>
                        <div class='inline-Bar5'>
                            <div class='shade'></div>
                            <p class='wait'>等待中</p>
                        </div>
                    </div>
                    <img class='customerImg' src='images/379448-512.png' alt='custmoer'>
                </div>
                <div class='waitCustomerBox' id='waitCustomerBox5'>
                    <div class='inline-Box-eating4'>  
                        <div class='customer-shade'></div>
                    </div>
                    <div class='cookingBar'>
                        <div class='inline-Bar5'>
                            <div class='shade'></div>
                            <p class='wait'>等待中</p>
                        </div>
                    </div>
                    <img class='customerImg' src='images/379448-512.png' alt='custmoer'>
                </div>
                <div class='needAlert'>
                    <p>餐厅目前有空位，赶紧点击等位客人头像让客人入座点餐吧</p>
                </div>
                <div class='finishAlert'>
                    <p>QIAN完成点餐，等候用餐</p>
                    <p>疯狂点击厨师头像可以加速做菜</p>
                </div>
                <div class='chefAlert'>
                    <p>招聘厨师成功！您已经有<span id='chefNumber'> 5 </span>名厨师</p>
                </div>
            </div>
        </section>
        
    </body>